<template>
	<view class="p-t-12 p-l-30 p-r-30 p-b-30">
<!--		<view class="p-t-40 p-l-56 p-r-44 p-b-42 border-eb radius-32 wallet">-->
<!--			<view class="flex-between col-top">-->
<!--				<text class="title font-24">钱包余额(元)</text>-->
<!--				<image class="w-44 h-44" src="@/static/images/user/icon_wallet.png" />-->
<!--			</view>-->
<!--			<text class="title font-80">{{user.balance}}</text>-->
<!--			<view class="flex color-c title m-t-26">-->
<!--				<view class="df fdc">-->
<!--					<text class="font-24">本月收益(元)</text>-->
<!--					<text class="font-36">{{numFormat(balance.monthly_income)}}</text>-->
<!--				</view>-->
<!--				<view class="df fdc m-l-56">-->
<!--					<text class="font-24">年度累计收益(元)</text>-->
<!--					<text class="font-36">{{numFormat(balance.annual_revenue)}}</text>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->
    <view class="wdqb">
      <view class="flex-between p-t-30 p-l-50">
        <view>
          <view style="color:#808080;" class="font-24">钱包余额(元)</view>
          <view style="color:#FB2D19;" class="font-64 m-t-4">{{numFormat(balance.balance_money || 0)}}</view>
        </view>
        <view class="tx_btn" @click="rjump">提现</view>
      </view>
      <view class="wdqb-b flex-between">
        <view class="p-l-40 flex-1">
          <view style="color:#808080;" class="font-24">本月收益(元)</view>
          <view style="color:#1A1A1A;" class="font-36">{{ numFormat(balance.monthly_income || 0) }}</view>
        </view>
        <view class="p-l-40 flex-1">
          <view style="color:#808080;" class="font-24">已提现金额(元)</view>
          <view style="color:#1A1A1A;" class="font-36">{{numFormat(balance.annual_revenue || 0)}}</view>
        </view>
      </view>
    </view>

		<view class="m-t-52 font-32 color-d font-weight-500 m-b-20">余额明细</view>

		<common-list class="p-b-10" @load="getBalanceMoneyAccount" :list="list" :status="status">
			<template #list>
				<view class="back-color-c p-30 radius-16 flex-between m-b-30" v-for="(item, i) in list" :key="i">
					<view class="df fdc">
						<text class="font-36 color-d font-weight-500">{{item.type_name}}</text>
						<text class="font-24 color-a m-t-20">{{item.create_time|date('yyyy.mm.dd hh:MM:ss')}}</text>
					</view>
					<text class="font-36 color-b font-weight-500">{{item.account_data}}</text>
				</view>
			</template>
			<template #empty>
				<empty text="暂无明细～"></empty>
			</template>
		</common-list>

<!--		<view class="btns">-->
<!--			<view class="btn" @click="rjump()">提现</view>-->
<!--		</view>-->

<!--		<Watermark color='#FFF1F1' :watermark="mark" :maxWidth="200" />-->
	</view>
</template>

<script>
	export default {
		name: "wallet",
		data() {
			return {
				page: 1,
				status: 'loading',
				list: [],
				balance: {},
			}
		},
		onLoad() {
			this.getMemberAccountInfo()
			this.getBalanceMoneyAccount()
		},
		onReachBottom() {
			if (this.status === 'nomore') return
			this.getBalanceMoneyAccount()
		},
		methods: {
			rjump() {
				// // #ifdef H5
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '请前往APP提现',
				// })
				// // #endif
				// // #ifdef APP-PLUS
				// this.jump('/pages/user/withdrawal')
				// // #endif
        this.jump('/pages/user/withdrawal')
			},
			// 用户财务-用户账户信息
			async getMemberAccountInfo() {
				const res = await this.$api.common.user('getMemberAccountInfo', {
					account_type: 'balance'
				})
				if (res.code === 200) {
					this.balance = res.data
				}
			},
			async getBalanceMoneyAccount() {
				const {
					page,
					limit
				} = this
				let params = {
					page,
					limit,
					from_type: 'all'
				}
				this.status = 'loading'
				const res = await this.$api.common.user('getBalanceMoneyAccount', params)
				if (res.code === 200) {
					const {
						count,
						list
					} = res.data
					this.list = [...this.list, ...list]
					if (this.list.length >= count) {
						// 所有数据加载完毕
						this.status = 'nomore'
						return
					}
					// 单次请求数据完毕
					this.status = 'loadmore'
					this.page = this.page + 1
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wallet {
		background: linear-gradient(180deg, #00d3d6 20%, #FB2D19 100%);
	}

	.title {
		font-family: PingFangSC-Regular, PingFang SC;
		color: #FFFFFF;
		text-shadow: 0rpx 4rpx 8rpx rgba(220, 59, 65, 0.5000);
	}

	.btns {
		width: 100%;
		position: fixed;
		bottom: 68rpx;
		left: 0;
		padding: 0 30rpx;
		box-sizing: border-box;
		z-index: 1;

		.btn {
			height: 88rpx;
			background-color: $b;
			text-align: center;
			line-height: 88rpx;
			border-radius: 49rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

  .wdqb{
    width: 690rpx;
    height: 288rpx;
    box-sizing: border-box;
    background: url("@/static/images/bg_qianbao2@2x.png") 0 0  /100% 100% no-repeat;
  }

  .tx_btn{
    width: 160rpx;
    height: 72rpx;
    background: linear-gradient( 117deg, #FE515F 0%, #FB2D19 20%, #FB2D19 59%, #FC7916 100%);
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 32rpx;
    margin-right: 30rpx;
  }

  .wdqb-b{
    width: 670rpx;
    height: 108rpx;
    background: #FFF9F9;
    border-radius: 24rpx;
    margin-top: 28rpx;
    margin-left: 10rpx;
  }
</style>
